<template>
	<!-- 主视图，背景颜色为#008080 -->
	<view class="container">
		<!-- 底部标签栏组件，currentIndex用于控制当前选中的标签 -->
		<view>
			<tnTabbar :currentIndex="currentIndex"></tnTabbar>
		</view>
		<!-- 产品列表组件，show属性控制显示状态 -->
		<Product ref="ProductList" :show="show" class="product-list"></Product>

		<!-- 修改搜索栏，使用动态样式 -->
		<view class="search-bar" :style="{
			bottom: `${keyboardHeight}px`
		}">
			<view class="search-box">
				<tn-input v-model="searchValue" class="search-input"
					placeholder="请输入...." :border="false" />
				<!-- 提交按钮，点击事件触发handleSubmit方法 -->
				<tn-button class="search-button tn-icon-search" :plain="true" :border="false" :fontSize="35" size="lg"
					@click="handleSubmit"></tn-button>
			</view>

			<view class="toast-container">
				<tn-toast ref="toast"></tn-toast>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入底部标签栏组件
	import tTabbar from "@/components/tnTabbar/tnTabbar.vue"
	// 引入产品列表组件
	import Product from "@/components/Product-List/Product-List.vue"
	export default {
		components: {
			tTabbar,
			Product
		},
		data() {
			return {
				// 当前选中的标签索引
				currentIndex: 0,
				// 搜索输入框的值
				searchValue: "",
				keyboardHeight: 0, // 改为存储实际键盘高度
			}
		},
		onLoad() {
			// 监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height-265;
			})
		},
		// 页面滚动事件处理
		onPageScroll(e) {
			uni.$emit('onPageScroll', e)
		},
		// 页面创建时获取token
		onShow() {
		},
		methods: {
			show(content) {
				this.$refs.toast.show({
					content: content,
					duration: 1500 // 设置提示框显示时间
				})
			},
			// 提交搜索请求
			handleSubmit() {
				// 获取输入的搜索值并去除前后空格
				this.searchValue = this.searchValue.trim();
				// 如果搜索值为空，显示提示信息
				if (!this.searchValue) {
					this.$refs.toast.show({
						title: '请输入搜索内容',
						icon: 'none',
						duration: 1500 // 设置提示框显示时间
					});
					return;
				}
				// 调用产品列表组件的getInfoName方法进行搜索
				this.$refs.ProductList.getInfoName(this.searchValue)
			}
		}
	}
</script>

<style>
	.tn-page {
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.container {
		height: 100vh;
		overflow: hidden;
		background-color: #008080;
	}

	.product-list {
		height: calc(100% - 60px);
		overflow-y: auto;
		padding-bottom: 90px;
	}

	.search-bar {
		position: fixed;
		width: 95%;
		left: 2.5%;
		background-color: #008080;
		height: 45px;
		border-radius: 10px;
		border: 1px solid black;
		z-index: 999;
		transition: bottom 0.3s;
		margin-bottom: 4%;
	}

	.search-box {
		display: flex;
		align-items: center;
	}

	.search-input {
		width: 60%;
		margin-left: 10%;
		margin-top: 5px;
	}

	.search-button {
		/* 按钮样式已通过props设置，这里可以添加额外样式如果需要 */
	}

	.toast-container {
		width: 100%;
		height: 30px;
	}
</style>